import { memo, useDeferredValue, useLayoutEffect, useRef, useState, useTransition } from 'react'
import { searchApi, createList } from './api'
import List from '../List'

interface Props {
  query: string
}

function SearchResults(props: Props) {
  console.log('xxxx')

  let items = [];
  for (let i = 0; i < 250; i++) {
    items.push(<Item key={i} query={props.query} />);
  }

  return (
    <div>
      {items}
    </div>
  )
}

export default memo(SearchResults)

function Item(props: Props) {
  let startTime = performance.now();
  while (performance.now() - startTime < 1) {
    // 每个 item 暂停 1ms，模拟极其缓慢的代码
  }

  return <div>hxxx: ${props.query}</div>
}